/**
在 React 中，Portals 是一种用于将子组件渲染到 DOM 的不同位置的功能。Portals 提供了一种方式，可以在父组件的 DOM 层次结构之外渲染子组件，这在需要将子组件渲染到特定的 DOM 节点时非常有用。
  1. 基本概念
  - Portals 允许将子组件渲染到父组件的 DOM 层次结构外部。这意味着可以将组件的内容插入到 DOM 的任意位置，而不受其父组件的限制。

  2. 创建 Portals
  使用  `ReactDOM.createPortal`  方法创建 Portals。该方法接受两个参数：要渲染的子组件和目标 DOM 节点。
   示例：
  jsx
  import React from 'react';
  import ReactDOM from 'react-dom';

  const Modal = ({ children }) => {
    return ReactDOM.createPortal(
      <div className="modal">
        {children}
      </div>,
      document.getElementById('modal-root') // 目标 DOM 节点
    );
  };

  // 使用 Modal 组件
  const App = () => {
    return (
      <div>
        <h1>Hello, World!</h1>
        <Modal>
          <h2>This is a modal!</h2>
        </Modal>
      </div>
    );
  };
  在这个例子中， `Modal`  组件的内容会被渲染到  `modal-root`  节点，而不是  `App`  组件的 DOM 层次结构中。

  3. 使用场景
  - 模态框（Modal）：Portals 非常适合用于模态框、弹出框等组件，因为这些组件通常需要在 DOM 的顶层渲染。
  - 工具提示（Tooltip）：在工具提示或下拉菜单中，Portals 可以确保它们在其他元素之上渲染。
  - 通知（Notification）：用于显示全局通知或消息时，Portals 可以将内容渲染到特定位置。

  4. Portals 的特点
  - DOM 结构：Portals 允许子组件在 DOM 结构中脱离父组件的位置，提供了更大的灵活性。
  - 事件处理：Portals 中的事件处理与普通组件相同，事件会在 DOM 中正常传播。
  - 样式：Portals 中的样式可以与父组件的样式相互独立，确保样式不会受到父组件的影响。

  5. 总结
  React Portals 是一种强大的功能，允许将子组件渲染到 DOM 的不同位置。通过使用 Portals，可以轻松实现模态框、工具提示和通知等功能，而不受父组件 DOM 层次结构的限制。这种灵活性使得 Portals 在构建复杂 UI 组件时非常有用。
 */
import React, { PureComponent } from 'react'
import { createPortal } from 'react-dom'
import Modal from './components/Modal'

export class App extends PureComponent {
  render() {
    return (
      <div className='app'>
        <h3>App Components</h3>
        {
          createPortal(
            <h4>App createPortal title</h4>,
            document.querySelector('#portals-root')
          )
        }

        <h3>Modal组件</h3>
        <Modal>
          <h4>Modal组件内容</h4>
          <p>Portals 是一种用于将子组件渲染到 DOM 的不同位置的功能</p>
        </Modal>
      </div>
    )
  }
}

export default App
